<template>
  <div id="app">
    <div>
      <Button @click="index=1" style="margin-right: 8px;">Debounce</Button>
      <Button @click="index=2" style="margin-right: 8px;">DragResize</Button>
      <Button @click="index=3" style="margin-right: 8px;">v-drag</Button>
    </div>
    <Debounce v-if="index===1"></Debounce>
    <DragResize v-if="index===2"></DragResize>
    <VDrag v-if="index===3">v-drag</VDrag>
    <MyTest></MyTest>
  </div>
</template>

<script>
import Debounce from './Debounce.vue'
import DragResize from './DragResize.vue'
import VDrag from './VDrag.vue'
import MyTest from './MyTest.vue'

export default {
  name: 'App',
  components: {
    Debounce,
    DragResize,
    VDrag,
    MyTest
  },
  data: function () {
    return {
      index: 0
    }
  },
  created() {
    console.log('app created')
    this.$nextTick(() => {
      console.log('app nextTick')
    })
  },
  mounted() {
    console.log('app mounted')
  },
  methods: {
    test () {
    }
  }
}
// export default obj
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}
</style>
